<template>
  <div class="chart2" ref="chart" style="width: 100%; height: 376px" ></div>
</template>

<script>

import * as echarts from "echarts";
export default {
  data() {
    return {};
  },
  methods: {
    getEchart() {
      const chart = this.$refs.chart;
      if (chart) {
        const myChart = this.$echarts.init(chart);
        const colorList = [
          "#9E87FF",
          "#73DDFF",
          "#fe9a8b",
          "#F56948",
          "#9E87FF",
        ];
        const option = {
          backgroundColor: "",
          title: {
            text: "2022年销售额",
            textStyle: {
              fontSize: 18,
              fontWeight: 400,
              color: "#ccc",
            },
            left: "left",
            top: "0%",
          },
          legend: {
            icon: "circle",
            top: "5%",
            right: "5%",
            itemWidth: 6,
            itemGap: 20,
            textStyle: {
              color: "#556677",
            },
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              label: {
                show: true,
                backgroundColor: "#fff",
                color: "#556677",
                borderColor: "rgba(0,0,0,0)",
                shadowColor: "rgba(0,0,0,0)",
                shadowOffsetY: 0,
              },
              lineStyle: {
                width: 0,
              },
            },
            backgroundColor: "#fff",
            textStyle: {
              color: "#5c6c7c",
            },
            padding: [10, 10],
            extraCssText: "box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)",
          },
          grid: {
            top: "15%",
            left: "35px",
            right: "30px",
          },
          xAxis: [
            {
              type: "category",
              data: ["1月", "3月", "5月", "7月", "9月", "11月"],
              axisLine: {
                lineStyle: {
                  color: "#333",
                },
              },
              axisTick: {
                show: false,
              },
              axisLabel: {
                interval: 0,
                textStyle: {
                  color: "#ccc",
                },
                // 默认x轴字体大小
                fontSize: 12,
                // margin:文字到x轴的距离
                margin: 20,
              },
              axisPointer: {
                label: {
                  // padding: [11, 5, 7],
                  padding: [0, 0, 10, 0],
                  /*
    除了padding[0]建议必须是0之外，其他三项可随意设置
    
    和CSSpadding相同，[上，右，下，左]
    
    如果需要下边线超出文字，设左右padding即可，注：左右padding最好相同
    
    padding[2]的10:
    
    10 = 文字距下边线的距离 + 下边线的宽度
                
    如：UI图中文字距下边线距离为7 下边线宽度为2
    
    则padding: [0, 0, 9, 0]
                
                */
                  // 这里的margin和axisLabel的margin要一致!
                  margin: 20,
                  // 移入时的字体大小
                  fontSize: 12,
                  backgroundColor: {
                    type: "linear",
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                      {
                        offset: 0,
                        color: "#ccc", // 0% 处的颜色
                      },
                      {
                        // offset: 0.9,
                        offset: 0.86,
                        /*
0.86 = （文字 + 文字距下边线的距离）/（文字 + 文字距下边线的距离 + 下边线的宽度）
                        
                        */
                        color: "#ccc", // 0% 处的颜色
                      },
                      {
                        offset: 0.86,
                        color: "#ccc", // 0% 处的颜色
                      },
                      {
                        offset: 1,
                        color: "#ccc", // 100% 处的颜色
                      },
                    ],
                    global: false, // 缺省为 false
                  },
                },
              },
              boundaryGap: false,
            },
          ],
          yAxis: [
            {
              type: "value",
              axisTick: {
                show: false,
              },
              axisLine: {
                show: false,
                lineStyle: {
                  color: "#DCE2E8",
                },
              },
              axisLabel: {
                textStyle: {
                  color: "#556677",
                },
              },
              splitLine: {
                show: true,
                lineStyle:{
                  color:'#333'
                }
              },
            },
            {
              type: "value",
              position: "right",
              axisTick: {
                show: false,
              },
              axisLabel: {
                textStyle: {
                  color: "#556677",
                },
                formatter: "{value}",
              },
              axisLine: {
                show: false,
                lineStyle: {
                  color: "#DCE2E8",
                },
              },
              splitLine: {
                show: false,
              },
            },
          ],
          series: [
            {
              name: "预期销售额",
              type: "line",
              data: [40, 75, 33, 87, 45, 82],
              symbolSize: 1,
              symbol: "circle",
              smooth: true,
              yAxisIndex: 0,
              showSymbol: false,
              lineStyle: {
                width: 5,
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  {
                    offset: 0,
                    color: "#9effff",
                  },
                  {
                    offset: 1,
                    color: "#9E87FF",
                  },
                ]),
                shadowColor: "rgba(158,135,255, 0.3)",
                shadowBlur: 10,
                shadowOffsetY: 20,
              },
              itemStyle: {
                normal: {
                  color: colorList[0],
                  borderColor: colorList[0],
                },
              },
            },
            {
              name: "实际销售额",
              type: "line",
              data: [34, 59, 40, 73, 68, 30],
              symbolSize: 1,
              symbol: "circle",
              smooth: true,
              yAxisIndex: 0,
              showSymbol: false,
              lineStyle: {
                width: 5,
                color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [
                  {
                    offset: 0,
                    color: "#73DD39",
                  },
                  {
                    offset: 1,
                    color: "#73DDFF",
                  },
                ]),
                shadowColor: "rgba(115,221,255, 0.3)",
                shadowBlur: 10,
                shadowOffsetY: 20,
              },
              itemStyle: {
                normal: {
                  color: colorList[1],
                  borderColor: colorList[1],
                },
              },
            },
          ],
        };
        myChart.setOption(option);
        window.addEventListener("resize", function () {
          myChart.resize();
        });
      }
    },
    // 展开侧边栏 echarts自适应
    autoResize() {
      this.$echarts.init(this.$refs.chart).resize()
    },
  },
  mounted() {
    this.getEchart();
  },
  watch:{
    '$store.state.app.sidebar.opened':{
        handler:function(){
          setTimeout(() => {
        this.autoResize()
         console.log('我更新了');
          }, 300);
        },
        deep:true
   
    }
  }
};
</script>

<style></style>
